<template>
    <div class="full-height">
      <Breadcrumb separator=">">
        <Breadcrumb-item href="/p4p">P4P</Breadcrumb-item>
        <Breadcrumb-item>优化星级</Breadcrumb-item>
      </Breadcrumb>
      <div class="main">
        <div style="height: 100%">
          <div class="mainhaed">
            <Select v-model="modelct" style="width:200px" @on-change="selechange">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <Button type="primary"  @click="sendParams">优化星级</Button>
          </div>

          <div class="mainbody" ref="mainbody">
            <Table :loading="loading" :height="tableHeight" border stripe :columns="columns" :data="datalist" @on-selection-change="handleSelectdata"></Table>
            <Page v-if="totalCount" :total="totalCount" placement="top" :current="current" :page-size="limit" :page-size-opts=[15,30,50] show-elevator show-sizer @on-change="changePage" @on-page-size-change="changePageSize" style="margin-top: 5px"></Page>
          </div>
        </div>
      </div>

      <Modal
              ref="word_promoteproduct"
              v-model="word_promoteproduct"
              title="星级优化推广产品列表"
              width="620"
              :styles="{top:'40px'}"
              @on-ok="word_promoteok"
      >
        <div>
          <p class="word_prtiele" style="margin-bottom: 20px">
            <span>关键词：{{word_promotedata}}</span>
            <!--<Button type="primary" shape="circle" @click="word_promotAddShow">添加</Button>-->
          </p>
          <ul style="list-style-type: none">

            <li v-for="item in word_promall">
              <Row type="flex" justify="center" align="middle" class="word_code-row-bg">
                <input name="Fruit" class="" type="radio" :value="item.productId+'|'+item.subject" v-model="radiocl" style="margin-right: 25px;" />
                <Col span="4">
                <img :src="item.productImage" alt="" style="width: 80px; height: 80px">
                </Col>
                <Col span="16">
                <p style="height: 40px;overflow: hidden;text-overflow:ellipsis;color: #00a1ff;">{{item.subject}}</p>
                <p style="height: 40px;">
                  <span v-if="item.qsStar=='0'">
                    <img src="../../common/images/sta01.png" alt="">
                  </span>
                  <span v-if="item.qsStar=='1'">
                    <img src="../../common/images/sta02.png" alt="">
                  </span>
                  <span v-if="item.qsStar=='2'">
                     <img src="../../common/images/sta03.png" alt="">
                  </span>
                  <span v-if="item.qsStar=='3'">
                     <img src="../../common/images/sta04.png" alt="">
                  </span>
                  <span v-if="item.qsStar=='4'">
                    <img src="../../common/images/sta05.png" alt="">
                  </span>
                  <span v-if="item.qsStar=='5'">
                    <img src="../../common/images/sta06.png" alt="">
                  </span>
                  <span>业务员：{{item.operator}}</span>
                </p>
                </Col>
              </Row>
            </li>
          </ul>
          <Page  v-if="word_prtotalCount" :total="word_prtotalCount" :current="word_prcurrent" :page-size="word_prlimit" show-elevator @on-change="word_prchangePage" @on-page-size-change="word_prchangePageSize"></Page>
        </div>

      </Modal>
    </div>


</template>

<script>
    export default {
        data () {
            return {
              tableHeight:580,
              loading:false,
              modelct:"x",
              cityList:[
                {
                  value: 'x',
                  label: '星级'
                },
                {
                  value: '0',
                  label: '0星'
                },
                {
                  value: '1',
                  label: '1星'
                },
                {
                  value: '2',
                  label: '2星'
                }
              ],

              columns:[
                {
                  type: 'selection',
                  "width":60,
                  align: 'center'
                },
                {
                  title: '关键词',
                  key: 'kwKeywords',
                  align: 'center',
                    render: (h, params) => {
                        return h('div', {
                            style:{
                                color:"#0076e8",
                                cursor:"pointer"
                            },
                            on:{
                                click: () => {
                                    this.word_promoteshow(params.row.kwKeywords,params.row.kwId);
                                    this.word_prid=params.row.kwid;

                                }
                            }
                        },params.row.kwKeywords);
                    }
                },
                {
                  title: '热度',
                  key: 'kwSearchHot',
                  align: 'center',
                },
                {
                  title: '竞争度',
                  key: 'kwCompanyCnt',
                  align: 'center',
                },
                {
                  title: '橱窗数',
                  key: 'kwShowwinCnt',
                  width:150,
                  align: 'center',
                },
              ],
              datalist:[],
              //分页参数
              totalCount:0,
              current:1,
              limit:15,
              offset:0,
              word_promotedata:"",
              ctdata:[],
              word_promoteproduct:false,
              word_promall:"",
              word_prtotalCount:0,
                word_prcurrent:1,
                word_prlimit:5,
                word_proffset:0,
                radiocl:""


            }
        },
        mounted(){
          this.init();
          this.tableHeight =this.$refs.mainbody.offsetHeight - 50;

        },
        methods: {


          init(){
                var data;
                if(this.modelct=="x"){
                  data="";
                }else {
                  data=this.modelct;
                }
               this.loading=true;
              this.api.StarOptimize.find({reqData:{starLevel:data,offset:this.offset,limit:this.limit,sort:"",order:""}}).then((res)=>{
                if(res.data.status=="200"){
                    this.loading=false;
                  console.log(res.data.rows);
                  this.datalist=res.data.rows;
                  this.totalCount=res.data.total
                }
              });
            },
          changePage(currentPage){
            this.offset = (currentPage-1)*this.limit;
            this.current = currentPage;
            this.init();
          },
          changePageSize(pageSize){
            this.limit = pageSize;
            this.init();
          },

          selechange(){
              this.totalCount=0;
              this.current=1;
              this.limit=15;
              this.offset=0;
              this.init();
          },

          handleSelectdata(selection){
            this.ctdata=[];
            console.log(selection);
            for(var i=0;i<selection.length;i++){
              this.ctdata.push(selection[i].kwKeywords);
            }
            console.log(this.ctdata);
          },
          sendParams(){
            if(this.ctdata.length>0){
              this.$http('alibaba/productRelease/OptimizationAscension',{kw_keywords:this.ctdata.join(',')}).then(res =>{
                var str="";
                for(var i=0;i<res.rows.length;i++){
                    str+=res.rows[i]+'<br>'
                    console.log(str);
                }
                console.log(str);
              	this.$Notice.warning({
	                title: '优化结果',
                    desc:str,
                    duration:10
	            });
              })
//            this.$router.push({
//              path: 'productRelease/batch',
//              name: 'batch',
//              params: {
//                kwIds:this.ctdata,
//                type:1,
//                analysisType:this.$route.params.analysisType
//              }
//            })
            }else {
              this.$Notice.warning({
                title: '请选择关键词',
              });
            }
          },
          word_promoteok(){
              console.log(this.radiocl);
              let str = this.radiocl.split('|');
              this.$http('alibaba/productRelease/OptimizationSingleton',{keywords:this.word_promotedata,productId:str[0],subject:str[1]}).then(res =>{
                  if (res.status == 200) {
                      var str="";
                      for(var i=0;i<res.rows.length;i++){
                          console.log(res.rows[i]);
                          str+=res.rows[i]+'<br>'
                      }
                      console.log(str);
                      console.log(res.status);
                      this.$Notice.warning({
                          title: '优化结果',
                          desc:str,
                          duration:10
                      });
                  }
              })
          },
          word_prchangePage(currentPage){
              this.word_proffset = (currentPage-1)*this.word_prlimit;
              this.word_prcurrent = currentPage;
              this.word_prinit()
          },
          word_prchangePageSize(pageSize){
              this.word_prlimit = pageSize;
              this.word_prinit()
          },
          word_promoteshow(name,id){
              this.word_promoteproduct=true;
              this.word_promotedata=name;
              this.joinProduct_id=id;

              this.word_prtotalCount=0;
              this.word_prcurrent=1;
              this.word_prlimit=5;
              this.word_proffset=0;
              this.word_prinit();
          },
          word_prinit(){
              this.$http('alibaba/productRelease/showProductOptimizing',{keywords:this.word_promotedata,offset:this.word_prcurrent,limit:this.word_prlimit}).then(res =>{
                  if (res.status == 200) {
                      this.word_promall=res.rows;
                      this.word_prtotalCount=res.total;
                  }
              })
          }
        }
    }
</script>
<style scoped>
.mainhaed{
  display: flex;
  height:40px;
  width:100%;
  line-height: 40px;
  justify-content: space-between;
}
.mainbody{
  padding-top: 15px;
  height: calc(100% - 40px);
}
</style>
